<template>
	<view class="card-detail">
		<u-cell-group>
			<u-cell v-for="item in recordList" :key="item.id" :index="item.id">
				<view slot="title">
					<view class="name" style="color: #4f58ff">充值记录</view>
					<view class="date">{{ item.created_at }}</view>
				</view>
				<!-- 计次卡 -->
				<view slot="value" class="text-right" v-show="item.card_type == 1">
					<view class="number" v-if="item.op == 0" style="color: #4f58ff"><text>+</text> {{ item.times }}<text
							v-if="item.gift_times != ''" style="color: #ff0000;">赠{{ item.gift_times}}</text></view>
					<view class="rest" v-if="item.else_times">剩余:{{ item.else_times }}次</view>
				</view>
				<!-- 私教卡 -->
				<view slot="value" class="text-right" v-show="item.card_type == 4">
					<view class="number" v-if="item.op == 0" style="color: #4f58ff"><text>+</text> {{ item.times }}<text
							v-if="item.gift_times != ''" style="color: #ff0000;">赠{{ item.gift_times}}</text></view>
					<view class="rest" v-if="item.else_times">剩余:{{ item.else_times }}次</view>
				</view>
				<!-- 金额卡 -->
				<view slot="value" class="text-right" v-show="item.card_type == 3">
					<view class="number" v-if="item.op == 0" style="color: #4f58ff"><text>+</text> {{ item.money }}<text
							v-if="item.gift_money != ''" style="color: #ff0000;">赠{{ item.gift_money}}</text> </view>
					<view class="rest" v-if="item.else_money">剩余:{{ item.else_money }}元</view>
				</view>
				<!-- 时间卡 -->
				<view slot="value" class="text-right" v-show="item.card_type == 2">
					<view class="number" v-if="item.op == 0" style="color: #4f58ff"><text>+</text> {{ item.days }}<text
							v-if="item.gift_days != ''" style="color: #ff0000;">赠{{ item.gift_days}}</text></view>
					<view class="rest" v-if="item.else_days">剩余:{{ item.else_days }}天</view>
				</view>
			</u-cell>
		</u-cell-group>

		<!-- <u-cell-group >
			<u-cell v-for="item in recordList" :key="item.id">
				<view slot="title">
					<view class="name">{{ item.name }}</view>
					<view class="date">{{ item.date }}</view>
				</view>
				<view slot="value" class="text-right">
					<view class="number">{{ item.number }}</view>
					<view class="rest" v-if="item.rest">剩余:{{ item.rest }}次</view>
				</view>
			</u-cell>
		</u-cell-group> -->


	</view>
</template>

<script>
	const index = require('@/api/personal/index.js')
	export default {
		data() {
			return {
				recordList: [],
			}
		},
		onLoad(options) {
			let card_id = options.card_id
			this.getMoneyRecord(card_id)
		},
		methods: {
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			// 获取卡消费记录
			async getMoneyRecord(card_id) {
				let params = {
					op: '0',
					card_id: card_id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
				}
				let res = await index.getMoneyRecord(params)
				if (res.code === 1) {
					this.recordList = res.data.result
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");

	.card-detail {
		padding-bottom: env(safe-area-inset-bottom);

		.top {
			padding: 30rpx;
		}


		/deep/.u-cell-group {
			.name {
				color: #333;
				font-weight: bold;
			}

			.number {
				color: #ff4105;
			}

			.date {
				color: #ccc;
			}

			.rest {
				color: #9c9c9c;
			}

			.rest,
			.date {
				margin-top: 14rpx;
				font-size: 26rpx;
			}
		}
	}
</style>
